Skip to content

feat: inline comment block ui styling including new copy-btn placement #210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: inline comment block ui styling including new copy-btn placement #210

wants to merge 2 commits into from

Conversation

yafira
Copy link

@yafira yafira commented Jul 29, 2025

☆ this pull request improves the design and behavior of inline comment code blocks in the ml5 documentation. updates focus on layout, styling, and plugin behavior, currently applied only to bodyPose.md.

changes included

layout and positioning

  • aligned the copy button with the language label using manual top and right positioning
  • used negative margins for pixel-perfect placement without additional wrappers (not sure if this is the best way but the placement feels right)

styling refinements

  • updated the toast, label, and button alignment for visual clarity
  • applied a consistent, muted pastel color palette
  • ensured clean spacing, padding, and font consistency

plugin improvements

  • enhanced the inline comment plugin to inject safe, escaped html
  • updated the copy button logic to support both normal and inline-comment blocks
  • improved code safety with proper character escaping in data attributes

note:
this update is currently implemented only in bodyPose.md. if approved, the changes can be extended across the rest of the documentation. :)

@yafira yafira requested a review from MOQN July 29, 2025 03:16
@netlify Netlify
Copy link

netlify bot commented Jul 29, 2025 •
edited
Loading

✅ Deploy Preview for ml5-next-gen-docs ready!

Name Link
🔨 Latest commit 5a8389c
🔍 Latest deploy log https://app.netlify.com/projects/ml5-next-gen-docs/deploys/688a716a66e9220008a50e52
😎 Deploy Preview https://deploy-preview-210--ml5-next-gen-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@yafira yafira changed the title feat: upgraded inline comment block styling and icon placement feat: upgraded inline comment block styling and copy-btn placement Jul 29, 2025
@yafira yafira changed the title feat: upgraded inline comment block styling and copy-btn placement feat: inline comment block ui styling and copy-btn placement Jul 29, 2025
@yafira yafira changed the title feat: inline comment block ui styling and copy-btn placement feat: inline comment block ui styling including new copy-btn placement Jul 29, 2025
@MOQN
Copy link
Member

MOQN commented Jul 30, 2025

@yafira Thank you so much for all the work! Amazing improvement :D One minor comment is that the code lost multiple semicolons so we might want to add them back.

Let me check if we can apply this style to other reference pages smoothly, then merge the PR. Thank you so much!!

@yafira
Copy link
Author

yafira commented Jul 30, 2025 •
edited
Loading

fix: semicolons preserved in inline code comments

@MOQN apologies for overlooking this ~ i was able to fix it! there was an issue with my editor settings (prettier was removing semicolons automatically).

also updated the code-comment plugin to stop trimming code lines, so semicolons and formatting are now preserved when rendering and copying code!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MOQN MOQN Awaiting requested review from MOQN

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@yafira @MOQN